<template>
  <lay-container fluid="true" class="menu-box">
    <!-- table -->
    <div class="table-box">
      <lay-table id="menuId" :height="`100%`" :columns="columns" :loading="loading" children-column-name="children"
        :data-source="dataSource" :default-toolbar="true" :default-expand-all="defaultExpandAll" :expand-index="1">
        <template #toolbar>
          <lay-button size="sm" @click="changeVisibleMenu('新建', null, 0)" type="normal">
            新建
          </lay-button>
          <lay-button size="sm" @click="expandAll(true)">展开全部</lay-button>
          <lay-button size="sm" @click="expandAll(false)">折叠全部</lay-button>
        </template>
        <template #name="{ row }">
          <lay-icon :class="row.icon"></lay-icon> &nbsp;&nbsp;
          {{ row.menuName }}
        </template>
        <template #status="{ row }">
          <lay-switch :model-value="row.status == 1" @change="changeStatus($event, row)"></lay-switch>
        </template>
        <template #option="{ row }">
          <lay-button v-if="row.type == 0" @click="changeVisibleMenu('新建', null, row.menuId)" size="xs" border="blue" border-style="dashed">
            添加
          </lay-button>
          <lay-button @click="changeVisibleMenu('修改', row, 0)" size="xs" border="green" border-style="dashed">
            修改
          </lay-button>
          <lay-button @click="toRemove(row)" size="xs" border="red" border-style="dashed">
            删除
          </lay-button>
        </template>
        <template #type="{ row }">
          <div v-show="row.type == 0">
            <lay-tag color="#165DFF" variant="light">目录</lay-tag>
          </div>
          <div v-show="row.type == 1">
            <lay-tag color="#2dc570" variant="light">菜单</lay-tag>
          </div>
          <div v-show="row.type >= 2">
            <lay-tag color="#F5319D" variant="light">外链</lay-tag>
          </div>
        </template>
      </lay-table>
    </div>

    <lay-layer v-model="visibleMenu" :title="title" :area="['700px', '370px']">
      <div style="padding: 20px">
        <lay-form :model="formData" ref="formRef" required>
          <lay-row>
            <lay-col md="12">
              <lay-form-item label="菜单名称" prop="menuName">
                <lay-input v-model="formData.menuName"></lay-input>
              </lay-form-item>
              <lay-form-item label="菜单代码" prop="menuCode">
                <lay-input v-model="formData.menuCode"></lay-input>
              </lay-form-item>
              <lay-form-item label="路由路径" prop="path">
                <lay-input v-model="formData.path"></lay-input>
              </lay-form-item>
              <lay-form-item label="图标" prop="icon">
                <lay-icon-picker v-model="formData.icon"></lay-icon-picker>
              </lay-form-item>
            </lay-col>
            <lay-col md="12">
              <lay-form-item label="排序" prop="sort">
                <lay-input-number v-model="formData.sort" style="width: 100%" position="right"></lay-input-number>
              </lay-form-item>
              <lay-form-item label="类型" prop="type">
                <lay-select v-model="formData.type" placeholder="请选择">
                  <lay-select-option :value="0" label="目录"></lay-select-option>
                  <lay-select-option :value="1" label="菜单"></lay-select-option>
                  <lay-select-option :value="2" label="弹层"></lay-select-option>
                  <lay-select-option :value="3" label="跳转"></lay-select-option>
                </lay-select>
              </lay-form-item>
              <lay-form-item label="父级编号" prop="parentId">
                <lay-input v-model="formData.parentId"></lay-input>
              </lay-form-item>
            </lay-col>
          </lay-row>
        </lay-form>
        <div style="width: 97%; text-align: right">
          <lay-button size="sm" type="primary" @click="toSubmit">保存</lay-button>
          <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
      </div>
    </lay-layer>
  </lay-container>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { layer } from '@layui/layui-vue'
  
  import { menuTree, menuAdd, menuRemove } from '../../../api/module/system'
  
  // 其他
  // -- 加载中
  const loading = ref(false);
  const title = ref('新增');
  const defaultExpandAll = ref(false);
  // 菜单
  // -- 是否可见
  const visibleMenu = ref(false);
  // -- 查询
  const searchQuery = ref({});
  // -- 数据源
  const dataSource = ref([]);
  // -- 表结构
  const columns = ref([
    { title: "复选", type: "checkbox" },
    
    { title: '菜单名称', key: 'menuName', customSlot: 'name' },
    { title: '菜单编号', key: 'menuId', hide: true },
    { title: '菜单父编号', key: 'parentId', hide: true },
    { title: '菜单代码', key: 'menuCode' },
    { title: '路由地址', key: 'path' }, 
    
    { title: '启用', width: '80px', key: 'status', customSlot: 'status' }, 
    
    { title: '类型', key: 'type', width: '80px', customSlot: 'type' }, 
    { title: '排序', key: 'sort', hide: true },
     
    { title: '操作', key: 'option', width: '160px', customSlot: 'option', fixed: 'right' }
  ]);
  // 表单
  // -- 表单数据
  const formData = ref({menuName: '', menuCode: '', path: '', type: 1, sort: 99, icon: 'layui-icon-component', status: 1, parentId: 0});
  // -- 表单标签
  const formRef = ref();
  
  // -- 方法函数
  // 加载默认数据
  function loadDataSource() {
    menuTree(searchQuery.value).then(({ data, code }) => {
      if (code == 200) {
        dataSource.value = data;
      }
      loading.value = false;
    })
  }
  // 删除
  function toRemove(row: any) {
    layer.confirm('您将删除 ['+row.menuName+'] 的数据？', {
      title: '提示',
      btn: [
        {
          text: '确定',
          callback: (id : any) => {
            menuRemove({id: row.menuId}).then(({ code, msg }) => {
              if (code == 200) {
                layer.msg('成功删除！', { icon: 1, time: 1000 });
              } else {
                layer.msg(msg, { icon: 2, time: 1000 })
              }
              loadDataSource();
            })
            layer.close(id)
          }
        },
        {
          text: '取消',
          callback: (id : any) => {
            layer.msg('您已取消操作')
            layer.close(id)
          }
        }
      ]
    })
  }
  // 提交
  function toSubmit() {
    menuAdd(formData.value).then(({ code, msg, message }) => {
      if (code == 200) {
        layer.msg('保存成功！', { icon: 1, time: 1000 });
      } else {
        layer.msg(message? message:msg, { icon: 2, time: 1000 })
      }
      loadDataSource();
      visibleMenu.value = false
    })
  }
  //
  function changeVisibleMenu(text : any, row : any, parentId: number) {
    title.value = text;
    if (row != null) {
      let info = JSON.parse(JSON.stringify(row))
      formData.value = info
    } else {
      formData.value = {menuName: '', menuCode: '', path: '', type: 1, sort: 99, icon: 'layui-icon-component', status: 1, parentId: parentId}
    }
    visibleMenu.value = !visibleMenu.value
  }
  function toCancel() {
    visibleMenu.value = false
  }
  //
  function changeStatus(isChecked : boolean, row : any){
    row.status = isChecked? 1 : 0;
    menuAdd(row).then(({code}) => {if(code == 200){layer.msg('修改成功');loadDataSource();}});
  }
  //
  function expandAll(flag : any) {
    defaultExpandAll.value = flag
  }
  
  // --预执行
  loadDataSource();
  
</script>

<style scoped>
  .menu-box {
    height: calc(100vh - 110px); 
    margin-top: 10px; box-sizing: border-box; 
  } 
  
  .top-search { margin-top: 10px; padding: 10px; height: 40px; border-radius: 4px; background-color: #fff; } 
  .table-box { margin-top: 0px; padding: 10px; height: 100%; border-radius: 4px; box-sizing: border-box; background-color: #fff; } 
  
  .search-input { display: inline-block; width: 98%; margin-right: 10px; } 
  
  .table-style { margin-top: 10px; } 
  .isChecked { display: inline-block; background-color: #e8f1ff; color: red; }
</style>